<template>
  <div class="retrieve">
    <div class="login-container">
      <div class="login-container-center">
        <div class="login-container__header">
          <span class="bold">找回密码</span>
        </div>
        <form class="zent-form zent-form--horizontal">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
            <div class="retrieve-input">
              <el-row :gutter="30">
                <el-col :span="8">
                  <el-select v-model="ruleForm.telSource" class="retrieve-select">
                    <el-option label="中国+86" value="0" />
                  </el-select>
                </el-col>
                <el-col :span="16">
                  <el-form-item prop="phone">
                    <el-input ref="username" v-model="ruleForm.phone" class="retrieve-text" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="retrieve-input">
              <el-row :gutter="30">
                <el-col :span="24">
                  <el-form-item prop="verificationCode" class="telCodeRow">
                    <el-input ref="verificationCode" v-model="ruleForm.verificationCode" placeholder="请输入手机验证码" class="retrieve-text" />
                    <div class="telCodeBtn" :class="{'isDisabled': ruleForm.phone.length !== 11 || !isCheck}" @click="sendEditPasswordCode()">{{ telCodeText }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="retrieve-input">
              <el-row :gutter="30">
                <el-col :span="24">
                  <el-form-item prop="pwd">
                    <el-input ref="password" v-model="ruleForm.pwd" placeholder="请输入密码" class="retrieve-text" show-password />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <div class="login-container__auto">
            <button type="submit" class="login-container__btn" @click="submit">
              <span>立即修改</span>
            </button>
            <div class="login-container__links">
              <div class="login-container__links__actions">
                <span>已有帐号?</span>
                <!-- <a class="js-retrieve-btn" href="/#/login">立即登陆</a> -->
                <span class="js-retrieve-btn" @click="goLogin">立即登陆</span>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
// import { validUsername } from '@/utils/validate'
// import SocialSign from './components/SocialSignin'
import { publicKey, sendEditPasswordCode } from '@/api/public'
import { findPwd } from '@/api/login'

import { rsa } from '@/utils/rsa'
// SocialSign
export default {
  name: 'Login',
  data() {
    // const validateUsername = (rule, value, callback) => {
    //   if (!validUsername(value)) {
    //     callback(new Error('Please enter the correct user name'))
    //   } else {
    //     callback()
    //   }
    // }
    // const validatePassword = (rule, value, callback) => {
    //   if (value.length < 6) {
    //     callback(new Error('The password can not be less than 6 digits'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      rules: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }
        ],
        pwd: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        verificationCode: [
          {
            required: true,
            message: '请输入手机验证码',
            trigger: 'blur'
          }
        ]
      },
      telCodeText: '获取验证码',
      isCheck: true,
      ruleForm: {
        telSource: '0',
        phone: '',
        pwd: '',
        verificationCode: ''
      },
      timer: null
    }
  },
  mounted() {
    if (this.ruleForm.phone === '') {
      this.$refs.username.focus()
    }
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    goLogin() {
      this.$router.push('/login')
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          publicKey().then(res => {
            this.ruleForm.newPassword = rsa(this.ruleForm.pwd, false)
            findPwd(this.ruleForm).then(response => {
              console.log(response)
              this.$message.success('密码修改成功')
              this.$router.push({ name: 'login' })
            })
          })
        }
      })
    },
    sendEditPasswordCode() {
      if (this.isCheck && this.ruleForm.phone.length === 11) {
        sendEditPasswordCode({
          tel: this.ruleForm.phone
        }).then(response => {
          this.ruleForm.key = response
          let time = 60
          this.isCheck = false
          this.telCodeText = `重新获取 ${time}s`
          this.timer = setInterval(() => {
            time--
            this.telCodeText = `重新获取 ${time}s`
            if (time === 0) {
              this.isCheck = true
              this.telCodeText = '获取验证码'
              clearInterval(this.timer)
            }
          }, 1000)
        })
      }
    }
  }
}
</script>

<style lang="scss">
// 解决记住密码的背景颜色
input:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;/*浏览器记住密码的字的颜色*/
    transition: background-color 5000s ease-in-out 0s;/*通过延时渲染背景色变相去除背景颜色*/
    caret-color: #acfff2;/*光标颜色*/
}

input:focus { outline: none; }/*外边框线去除*/

.retrieve{
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 1200px;
  min-height: 680px;
  overflow: auto;
  background: url("~@/assets/login/bg.jpg") no-repeat center center;
  background-size: 100% 100%;
  // background: #f2f3f5;
  /* reset element-ui css */
  .login-container {
    width: 550px;
    border-radius: 6px;
    // background: #fff;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    // width: 948px;
    top: 46%;
    left: 51%;
    padding: 50px 56px 60px;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    .login-container-center {
      .login-container__header{
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: baseline;
        align-items: baseline;
        padding-bottom: 10px;
        font-size: 20px;
        color: #969799;
        span:first-child {
          width: 100%;
          margin-left: 14px;
        }
        .bold {
          font-weight: 500;
          font-size: 26px;
          color: #fff;
          cursor: default;
        }
      }
      .zent-form {
        margin-bottom: 30px;
        width: auto;
        .retrieve-input {
          padding-top: 10px;
          .telCodeRow {
            position: relative;
            .isDisabled {
              color: #969799 !important;
              cursor: not-allowed !important;
            }
            .telCodeBtn {
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              font-size: 16px;
              color: #155bd4;
              cursor: pointer;
            }
          }
          .retrieve-text,.retrieve-select {
            .el-input__inner {
              border-width: 0;
              border-bottom-width: 1px;
              border-radius: 0;
            }
          }
          .el-form-item {
            margin-bottom: 0;
          }
        }
        .login-container__auto {
          color: #323232;
          margin-top: 40px;
          .login-container__btn {
            margin: 16px 0;
            height: 48px;
            line-height: 46px;
            // background: #155bd4;
            background: url("~@/assets/login/btn.png") no-repeat center center;
            background-size: 100% 100%;
            font-size: 18px;
            color: #fff;
            display: block;
            width: 100%;
            padding: 0;
            border: 1px solid #bbb;
            text-align: center;
            vertical-align: middle;
            box-sizing: border-box;
            cursor: pointer;
            transition: all .3s;
            font-family: inherit;
            border-radius: 2px;
            border-color: transparent;
          }
          .login-container__btn:hover {
              // background: #3773da;
              background: url("~@/assets/login/btn.png") no-repeat center center;
              background-size: 100% 100%;
              color: #fff;
          }
          .login-container__links {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: justify;
            justify-content: flex-end;
            .login-container__links__actions {
              font-size: 14px;
              .js-retrieve-btn {
                color: #155bd4;
                cursor: pointer;
              }
              span {
                margin-right: 10px;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
  .el-input__inner {
      border-width: 0;
      border-bottom-width: 1px;
      border-radius: 0;
      background: transparent !important;
      border-bottom: 1px solid #1e94d4;
      color: #fff;
      &::placeholder {
        color: #fff;
      }
      &::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #fff;
      }
      &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #fff;
        /* 设置opacity  解决firefox不生效问题 */
        opacity: 1;
      }
      &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #fff;
        opacity: 1;
      }
      &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #fff;
      }
  }
}
</style>

